<template>
  <div>
    <div class="top">
      <div class="left">
        <span class="remove">x</span>
        <div>
          <img src="../.././public/timg (3).jpg" alt="" @click="showPopup">
        </div>
        <van-popup v-model="show">
          <img src="../.././public/timg (3).jpg" alt="">
        </van-popup>
      </div>
      <div class="right">
        <span class="login" @click="login" v-if="this.list.length<=0">立即登录</span>
        <span class="login" v-if="this.list.length>0">{{list[0].username}}</span>
        <p class="jifen">积分：0</p>
        <span class="tuichu" v-if="this.list.length>0" @click="out">退出登录</span>
      </div>
    </div>
    <div class="lunbo">
      <van-notice-bar left-icon="volume-o" background="white" scrollable text="新上线更稳定的付费快递查询接口。" />
    </div>
    <div class="wo">
      <div class="wo-dingdan" @click="tooo">
        <p>
          <i class="iconfont icon-icon-"></i>
          我的订单
        </p>
        <p>&gt;</p>
      </div>
      <div class="wo-nav">
        <div v-for="(item,index) in arr" :key="index" @click="too(index)">
          <i class="iconfont" :class="item.icon"></i><br>
          <span>{{item.title}}</span>
        </div>
      </div>

    </div>
    <div class="user">
      <div class="user-i" v-for="(item,index) in arr1" :key="index" @click="to(index)">
        <i class="iconfont" :class="item.icon" :style="item.color"></i><br>
        <span>{{item.title}}</span>
      </div>
    </div>
    <div class="biaoyu">The work of liu tao</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{
          title: '待付款',
          icon: 'icon-fukuan'
        }, {
          title: '待发货',
          icon: 'icon-fahuo'
        }, {
          title: '待收货',
          icon: 'icon-shouhuo'
        }, {
          title: '待评价',
          icon: 'icon-pingjia'
        }],
        arr1: [{
          title: '我的余额',
          icon: 'icon-qian',
          color: 'color:red'
        }, {
          title: '我的砍价',
          icon: 'icon-bi-copy',
          color: 'color:red'
        }, {
          title: '我的礼券',
          icon: 'icon-asmkticon0146',
          color: 'color:orange'
        }, {
          title: '我的收藏',
          icon: 'icon-star-line',
          color: 'color:orange'
        }, {
          title: '我的地址',
          icon: 'icon-zuobiao-copy',
          color: 'color:blue'
        }, {
          title: '联系客服',
          icon: 'icon-erji',
          color: 'color:skyblue'
        }],
        show: false,
      }
    },
    computed: {
      list() {
        var list = localStorage.user
        if (list) {
          list = JSON.parse(list)
        }
        return list
      }
    },
    methods: {
      tooo(){
        this.$router.push({
            path:'/order'
          })
      },
      too(i){
        if(i==3){
          this.$router.push({
            path:'/comment'
          })
        }
      },
      to(i){
        if(i==2){
          this.$router.push({
            path:'/coupon'
          })
        }else if(i==4){
          this.$router.push({
            path:'/address'
          })
        }
      },
      showPopup() {
        this.show = true;
      },
      login() {
        this.$router.push({
          path: '/login'
        })
      },
      out() {
        localStorage.user = [],
          localStorage.token = []
        this.$toast('退出成功'),
          setTimeout(() => {
            this.$router.push({
              path: '/login'
            })
          }, 1000)
      },
    },
  }
</script>

<style lang='scss' scoped>
  .top {
    width: 100%;
    height: 3rem;
    background-color: rgb(219, 195, 150);
    display: flex;
    align-items: center;

    .left {
      position: relative;
      width: 30%;

      .remove {
        font-size: 0.3rem;
        color: white;
        border: 0.01rem solid white;
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0px;
      }

      div {
        width: 2rem;
        height: 2rem;
        background-color: red;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;

        }
      }
    }

    .right {
      margin-left: 0.2rem;

      .login {
        color: white;
        font-size: 0.55rem;

      }

      .tuichu {
        font-size: 0.3rem;
        color: white;
      }

      .jifen {
        margin-top: 0.2rem;
        font-size: 0.3rem;
        color: white;
        width: 2rem;
        background-color: rgb(172, 155, 126);
        padding: 0.1rem 0.2rem;
      }
    }
  }

  .lunbo {
    height: 0.8rem;
    width: 100%;
    line-height: 0.8rem;

  }

  .wo {
    width: 100%;
    height: 3rem;
    font-size: 0.3rem;
    border-top: 0.2rem solid rgb(219, 219, 219);

    .wo-dingdan {
      height: 1rem;
      width: 100%;
      padding: 0 0.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.01rem solid rgb(235, 232, 232);
    }

    .wo-nav {
      text-align: center;
      width: 100%;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-bottom: 0.2rem solid rgb(219, 219, 219);

      i {
        font-size: 0.6rem;
      }
    }

  }

  .user {
    width: 100%;
    height: 3.5rem;
    display: flex;
    align-content: space-around;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;

    .user-i {
      width: 30%;
      font-size: 0.35rem;

      i {
        font-size: 0.6rem;
      }
    }
  }

  .biaoyu {
    width: 100%;
    height: 0.5rem;
    font-size: 0.2rem;
    background-color: rgb(230, 228, 228);
    text-align: center;
    line-height: 0.5rem;
  }
</style>